<template>
	<div>
		<header>
			<div class="wrap">
				<div class="left">
					<router-link to="/"><img src="../static/logo.svg"></router-link>
					<input type=text @keyup.13="baidu()" v-model="baiduContent">
				</div>
				
				<div class="right">
					<ul>
						<li><router-link to="/">首页</router-link></li>
						<li><router-link to="/getstart">新手入门</router-link></li>
						<li><router-link to="/api">API</router-link></li>
						<li><router-link to="/about">关于</router-link></li>
						<li><router-link to="/signup">注册</router-link></li>
						<li><router-link to="/login">登录</router-link></li>
					</ul>
				</div>
				<div class="clearfixed"></div>

			</div>
		</header>
		<div class="clearfixed"></div>
	</div>
</template>

<script>
export default {
	name:'Head',
	data(){
		return{
			baiduContent:''
		}
	},
	methods:{
		baidu(){
			window.open('http://www.baidu.com/baidu?tn=baidu&word='+ this.baiduContent);
			this.baiduContent = '';
		}
	}
}
</script>

<style scoped>
	header {background: #444;height: 50px;overflow: hidden;}
	header .left{float: left;}
	header .left img{padding: 8px 0 0 10px;width: 120px;height: 30px;float: left;}
	header .left input{width: 210px;height: 22px;color:#f2f2f2;border-radius: 50px;outline: none;border: 0;padding:2px 10px;float: left;margin: 13px;margin-right: 0;background: #888;transition: all .5s;}
	header .left input:focus{background: #fff;color: #666;}
	header .right{float: right;}
	header .right ul li{float: left;padding: 0 12px; font-size: 1rem;line-height: 50px;}
	header .right ul li>a{color: #ccc;}
	header .right ul li:hover{color: #fff;}
	@media screen and (max-width:768px){
		header{height: 100px;}
		header{width:100%;text-align: center;}
		header .right ul li{padding: 0 10px;}
		header .right{float: left;}
		header .left input{width: 140px;}
	}
	@media screen and (max-width:313px){
		header .left input{display: none;}
	}
</style>